<template>
    <!-- pages/shopdetails/joinshop/index.wxml -->
    <view>
        <view class="bgimg">
            <image class="img" :src="hairimgUrl + 'joinshop.png'"></image>
        </view>
        <view class="btnbox">
            <view class="btn1" @tap="onClickShow1">邀请网约美发师</view>
            <view class="btn2" @tap="onClickShow2">邀请店内美发师</view>
        </view>
        <view class="msgbox mt-100">
            <view class="hx"></view>
            <view class="msg">邀请须知</view>
            <view class="hx"></view>
        </view>
        <view class="text mt-40">【网约美发师】可入驻多家门店（不限制入驻门店数量和地理位置），入驻申请发出后门店申请即可入驻成功，完成订单后马上获得相应佣金；</view>
        <view class="text">收益占比：美发师占60%，门店占25%（包含水电费、场地费、大型设备使用费，不含烫染护的耗材费用）</view>
        <view class="text mt-40">
            【店内发型师】门店的全职美发师，由门店发放相应的佣金，每个美发师只能入驻一家门店，入驻后不可再申请其他门店，与当前入驻门店解约后方可恢复申请入驻权限；
        </view>
        <view class="text">收益占比：门店占服务金额的85%，店内美发师收益由门店发放。</view>

        <van-overlay :show="show1" @click="onClickHide1">
            <view class="wrapper">
                <view class="wrapperbox">
                    <view class="title">网约美发师</view>
                    <view class="text1 mt-40">可入驻多家门店（不限制入驻门店数量和地理位置），入驻申请发出后门店申请即可入驻成功，完成订单后马上获得相应佣金；</view>
                    <view class="text1">收益占比：美发师占60%，门店占25%（包含水电费、场地费、大型设备使用费，不含烫染护的耗材费用）</view>
                </view>
                <view class="btnbox1">
                    <view class="btn1" @tap.stop.prevent="onplatform">确认申请</view>
                    <view class="btn2" @tap.stop.prevent="onClickHide1">我再想想</view>
                </view>
            </view>
        </van-overlay>
        <van-overlay :show="show2" @click="onClickHide2">
            <view class="wrapper">
                <view class="wrapperbox">
                    <view class="title">店内发型师</view>
                    <view class="text1 mt-40">
                        门店的全职美发师，由门店发放相应的佣金，每个美发师只能入驻一家门店，入驻后不可再申请其他门店，与当前入驻门店解约后方可恢复申请入驻权限；
                    </view>
                    <view class="text1">收益占比：门店占服务金额的85%，店内美发师收益由门店发放。</view>
                    <view class="btnbox1">
                        <view class="btn1" @tap.stop.prevent="oninshop">确认申请</view>
                        <view class="btn2" @tap.stop.prevent="onClickHide2">我再想想</view>
                    </view>
                </view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
// pages/shopdetails/joinshop/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            hairimgUrl: app.globalData.hairimgUrl,
            //美发师全局img路径
            stylistId: '',
            show1: false,
            show2: false
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            stylistId: options.stylistId
        }); // wx.showModal({
        //   title: '提示',
        //   content: '该门店您已发过申请，请耐心等待对方同意或联系门店通过申请',
        //   showCancel: false,
        //   confirmText: '知道了',
        //   confirmColor: '#FF8722',
        //   success (res) {
        //     if (res.confirm) {
        //       console.log('用户点击确定')
        //     } else if (res.cancel) {
        //       console.log('用户点击取消')
        //     }
        //   }
        // })
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 关闭弹窗
        onClickHide1() {
            this.setData({
                show1: false
            });
        },

        onClickHide2() {
            this.setData({
                show2: false
            });
        },

        onClickShow1() {
            this.setData({
                show1: true
            });
        },

        onClickShow2() {
            this.setData({
                show2: true
            });
        },

        // 网约美发师加入 参数 stylistId：美发师id、storeId：门店id、apply：申请，0入驻，1签约、 userId：用户id
        onplatform() {
            _request
                .postObj('/store/nexus', {
                    stylistId: this.stylistId,
                    storeId: uni.getStorageSync('storeId'),
                    nexus: 0
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            show1: false
                        });
                        uni.showToast({
                            title: '申请成功',
                            icon: 'none',
                            duration: 1000
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 店内美发师加入
        oninshop() {
            _request
                .postObj('/store/nexus', {
                    stylistId: this.stylistId,
                    storeId: uni.getStorageSync('storeId'),
                    nexus: 1
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            show2: false
                        });
                        uni.showToast({
                            title: '申请成功',
                            icon: 'none',
                            duration: 1000
                        });
                        setTimeout(() => {
                            uni.navigateBack({
                                delta: 1
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/shopdetails/joinshop/index.wxss */
.bgimg {
    height: 510rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img {
    width: 320rpx;
    height: 300rpx;
}

.btnbox {
    display: flex;
    justify-content: space-around;
}

.btn1 {
    width: 310rpx;
    height: 84rpx;
    background: #ff8722;
    border-radius: 21px;
    font-size: 32rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 84rpx;
    text-align: center;
}

.btn2 {
    width: 310rpx;
    height: 84rpx;
    border-radius: 21px;
    border: 1px solid #ff8722;
    font-size: 32rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 84rpx;
    text-align: center;
}

.msgbox {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.msg {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    margin: 0 30rpx;
}

.hx {
    width: 110rpx;
    height: 2rpx;
    background: #ff8722;
    filter: blur(0px);
}

.text {
    width: 670rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
    padding: 0 40rpx;
}

/* 弹窗 */
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.wrapperbox {
    position: absolute;
    bottom: 0;
    width: 750rpx;
    height: 590rpx;
    background: #ffffff;
    border-radius: 10px 10px 0px 0px;
}

.btnbox1 {
    display: flex;
    justify-content: space-around;
    position: absolute;
    width: 100%;
    bottom: 70rpx;
}

.title {
    width: 100%;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    text-align: center;
    margin-top: 40rpx;
}

.text1 {
    width: 670rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    padding: 0 40rpx;
}
</style>
